<template>
  <div class="userManagement">
    <div class="userManagement_button">
      <el-button
        type="primary"
        size="medium"
        icon="el-icon-plus"
        @click="dialog.addUser = true"
        >新增</el-button
      >
      <el-button
        type="primary"
        size="medium"
        icon="el-icon-edit"
        @click="dialog.changeUser = true"
        >编辑</el-button
      >
      <el-button type="primary" size="medium" icon="el-icon-delete"
        >删除</el-button
      >
      <el-button type="primary" size="medium">查看用户</el-button>
      <el-button type="primary" size="medium">授权</el-button>
    </div>
    <div class="userManagement_form">
      <el-row :gutter="10">
        <el-col :span="4">
          <div class="form_list">
            <span class="inputSpan">用户Id</span>
            <el-input
              size="small"
              type="text"
              placeholder="请输入用户ID"
              v-model="form.userId"
            />
          </div>
        </el-col>
        <el-col :span="4">
          <div class="form_list">
            <span class="inputSpan">用户名</span>
            <el-input
              size="small"
              type="text"
              placeholder="请输入用户名"
              v-model="form.userName"
            />
          </div>
        </el-col>
        <el-col :span="4">
          <div class="form_list">
            <span class="inputSpan">邮箱</span>
            <el-input
              size="small"
              type="text"
              placeholder="请输入邮箱"
              v-model="form.userEmail"
            />
          </div>
        </el-col>
        <el-button
          class="search"
          type="primary"
          size="medium"
          icon="el-icon-search"
          @click="getuser"
          >查询</el-button
        >
      </el-row>
    </div>
    <div class="userManagement_table">
      <el-table
        class="table"
        :loading="loading"
        show-empty
        border
        :data="tableData"
        stripe
        @selection-change="selectTable"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column
          v-for="(item, index) in tableOptions"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          width="auto"
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="userManagement_block">
      <el-pagination
        class="pagination"
        @current-change="changeCurrent"
        :current-page="page.currentPage"
        :page-size="page.pageSize"
        layout="total,  prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>

    <!-- 新增 -->
    <el-dialog
      style="z-index: 999"
      width="40%"
      title="新增用户"
      :visible.sync="dialog.addUser"
    >
      <el-form
        label-width="80px"
        :model="addUser"
        :rules="addRules"
        ref="addUser"
      >
        <el-form-item label="用户ID" prop="userId">
          <el-input
            type="text"
            size="medium"
            v-model="addUser.userId"
          ></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="userName">
          <el-input
            type="text"
            size="medium"
            v-model="addUser.userName"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="userEmail">
          <el-input
            type="text"
            size="medium"
            v-model="addUser.userEmail"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="addUser.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式" prop="telephone">
          <el-input
            type="text"
            size="medium"
            v-model="addUser.telephone"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="escSubmitForm('addUser')">取消</el-button>
        <el-button type="primary" @click="submitForm('addUser')"
          >确定</el-button
        >
      </span>
    </el-dialog>

    <!-- 编辑 -->
    <el-dialog
      style="z-index: 999"
      width="40%"
      title="编辑"
      :visible.sync="dialog.editUser"
    >
      <el-form
        label-width="80px"
        :model="addUser"
        :rules="addRules"
        ref="addUser"
      >
        <el-form-item label="用户ID" prop="userId">
          <el-input
            type="text"
            size="medium"
            v-model="addUser.userId"
            disable="false"
          ></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="userName">
          <el-input
            type="text"
            size="medium"
            v-model="addUser.userName"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="userEmail">
          <el-input
            type="text"
            size="medium"
            v-model="addUser.userEmail"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="addUser.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式" prop="telephone">
          <el-input
            type="text"
            size="medium"
            v-model="addUser.telephone"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="escEditUser('editUser')">取消</el-button>
        <el-button type="primary" @click="EditUser('editUser')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialog: {
        addUser: false,
        editUser: false,
      },
      loading: false,
      //分页器
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      //表格
      form: {
        userId: "",
        userName: "",
        userEmail: "",
      },
      addUser: {
        userId: "",
        userName: "",
        userEmail: "",
        sex: "",
        telephone: "",
      },
      addRules: {
        userId: [
          { required: true, message: "请输入用户Id", trigger: "blur" },
          { min: 3, max: 6, message: "长度在3到5个字符", trigger: "blur" },
        ],
        userName: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
        userEmail: [
          { required: true, message: "请输入用户邮箱", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        telephone: [
          { required: true, message: "请输入用户联系方式", trigger: "blur" },
          { min: 7, max: 11, message: "长度在7到11个字符", trigger: "blur" },
        ],
      },
      tableOptions: [
        {
          prop: "userId",
          label: "用户Id",
          width: "80",
        },
        {
          prop: "userName",
          label: "名称",
          width: "150",
        },
        {
          prop: "email",
          label: "邮箱",
          width: "200",
        },
        {
          prop: "sex",
          label: "性别",
          width: "80",
        },
        {
          prop: "telephone",
          label: "联系方式",
          width: "200",
        },
      ],
      tableData: [],
    };
  },
  created() {
    this.getuser();
  },

  mounted() {},
  methods: {
    // 新增
    addUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$loading();
          const params = {
            userId: this.addUser.userId,
            userName: this.addUser.userName,
            userEmail: this.addUser.userEmail,
            sex: this.addUser.sex,
            telephone: this.addUser.telephone,
          };
          this.$http
            .addUser(params)
            .then((res) => {
              this.$loading().close();
              this.dialog.addUser = false;
              this.$message.success("新增成功");
              this.getuser();
            })
            .catch((err) => {
              this.dialog.addUser = false;
              this.$loading().close();
              console.log("error:", err);
              this.$message.error("系统正在开小差...");
            });
        }
      });
    },
    // 取消新增
    escAddUser(formName) {
      (this.dialog.addUser = false), this.$refs[formName].resetFields();
    },
    selectTable(row) {
      let { userId, userName, email, sex, telephone } = row[0];
      console.log("row", row[0]);
    },
    async getuser() {
      this.loading = true;
      try {
        const params = {
          currentPage: this.page.currentPage,
          pageSize: this.page.pageSize,
          userId: this.form.userId,
          userName: this.form.userName,
          userEmail: this.form.userEmail,
        };
        let result = await this.$http.getUserMsg(params);

        if (result.code == 200) {
          this.loading = false;
          this.tableData = Object.values(result.data.userMsgMock);
          this.page.total = result.data.total;
        } else {
          this.loading = false;
          this.$message.error(result.message);
        }
      } catch (error) {
        this.loading = false;
        this.$message.error("系统正在开小差...");
        console.log("error:", error);
      }
    },

    changeCurrent(options) {
      this.page.currentPage = options;
      this.getuser();
    },
  },
};
</script>
<style lang="scss">
.userManagement {
  display: flex;
  flex-direction: column;
  padding: 10px;
  height: 100%;
  .userManagement_button {
    .el-button--medium {
      width: 100px;
      background-color: #0b74f4;
    }
  }
  .userManagement_form {
    border: 1px solid #e1e1e1;
    border-radius: 3px;
    margin-top: 10px;
    position: relative;
    padding: 15px;
    .search {
      position: absolute;
      right: 20px;
    }
    .form_list {
      display: flex;
    }
  }
  .userManagement_table {
    flex: 1;
    margin-top: 15px;
    border: 1px solid #e1e1e1;
    .table {
      width: 100%;
      height: auto;
    }
  }
  .userManagement_block {
    height: 30px;
    width: 100%;
    position: relative;
    .pagination {
      position: absolute;
      right: 50px;
    }
  }
}
</style>
